@import "../../styles/base";

/*分类*/
.ga-category{
  @extend %flex;
  position: absolute;
  height:100%;
  width:100%;
  @include align-items(stretch);
  .tabs{
    @include flex(0 0 auto);//不放大 缩小
    @include wh(185rpx,100%);
    background: #fff;
    overflow-x:hidden ;
    overflow-y: scroll;

    .item{
      display:block;
      font-size:28rpx;
      padding:24rpx 0rpx;
      text-align: center;
      @include wh(185rpx,auto);
      border-bottom:1px solid $grayLighter;

      &.active{
        color:$primary;
      }
    }
  }

  .tab-box{
    @include flex(1 1 auto);//放大 缩小
    overflow-y: scroll; 

    .h3{
      text-align: center;
      margin-top:30rpx;
      font-size:28rpx;
      color:$yellow;
    }
  }

  .cate-list{
    @include display-flex();
    @include flex-wrap(wrap);
    margin-bottom:60rpx;

    .item{
      @include display-flex();
      @include flex-direction(column);
      @include align-items(center);
      @include wh(33.33333%,auto);
      margin-top:35rpx;
      overflow: hidden;

      .img-box{
        background: #fff;
        @include wh(86rpx,86rpx,86rpx);
        @include border-radius(50%);
        border:1px solid $grayLighter;
      }

      .p1{
        width:100%;
        text-align: center;
        margin-top:20rpx;
        @extend %ellipsis-basic;
      }
    }
  }
  .ga-group-list{
    .img-box{
      @include wh(160rpx,130rpx);
      border:1rpx solid $grayLighter;
      @include border-radius(8rpx);
      @include box-shadow(4rpx 6rpx 15rpx $grayLighter);
    }

    .cart{
      position: absolute;
      right:0;
      bottom:0;
      z-index: $zindexDropdown;
      @include wh(35rpx,35rpx);
      @include border-radius(50%);
      background: url("../../../static/images/icon/cart.png") no-repeat;
      background-size: 100% 100%;
    }

    .item{
      margin-top:20rpx;

      .p1{
        margin-top:5rpx;
        color:$gray;
        @extend %ellipsis-basic;
      }
      .p2{
        margin-top:5rpx;
        color:$gray;
      }
      .p3{
        margin-top:28rpx;
        font-size:26rpx;
        color:$primary;
        span{
          color:$grayLight;
          text-decoration: line-through;
        }
      }
    }
  }
}
